<!--
 * @Description: main
 * @Author: QiangWei
 * @Date: 2020-01-14 15:30:19
 * @LastEditors  : QiangWei
 * @LastEditTime : 2020-01-14 18:22:59
 -->
<template>
  <section class="index">
    首页
    <van-tabbar v-model="active" @change="tabChange">
      <van-tabbar-item name="home" icon="home-o"></van-tabbar-item>
      <van-tabbar-item name="" icon="search"></van-tabbar-item>
    </van-tabbar>
  </section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Tabbar, TabbarItem } from 'vant';

@Component({
  name: 'Layout',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  }
})
export default class Layout extends Vue {
  private active: string = 'home';

  private tabChange(index) {
    console.log(index);
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.index {
  .van-tabbar {
    height: vw(90)
  }
  .van-tabbar-item--active {
    color: $active-color;
  }
  .van-tabbar-item__icon {
    margin-bottom: 0;
    font-size: 24px;
  }
}
</style>